<template id="fillInTransport">
  <div id="fillInTransport">
    <is-header mainText="填写物流信息" bgColor="#F7F7F7" textColor="#474747">
      <img :src="left">
    </is-header>
    <!-- <model :isShow="isShow" title=" " v-on:closeIsModel="close">
      {{whatHappen}}
    </model>
    <model :isShow="chose.isShow" v-on:closeIsModel="choseDelivery" title="请选择物流公司">
      <slideChose :value="chose.value" @chose="choseWhich"></slideChose>
      <a @click="choseDelivery('')" flex slot="work">取消</a>
    </model> -->

    <div class="text_cantainer">
      <cells>
        <mu-dropDown-menu :value="logistics" @change="logisticsChange">
          <mu-menu-item  value="" title="物流公司"/>
          <mu-menu-item  v-for="logistics in this.logisticsList" :key="logistics.id"  :value="logistics.name" :title="logistics.name"/>
        </mu-dropDown-menu> 
        <!-- <cell label="物流公司"  v-tap="{methods: fillIn, value:choose}" :value="queryData.delivery"></cell> -->
        <cell label="物流单号"  v-tap="{methods: fillIn, value:trackingNo}" :value="queryData.trackingNo"></cell>
        <cell label="联系电话"  v-tap="{methods: fillIn, value:sendNumber}" :value="queryData.mobile"></cell>
        <cell label="退款说明"  v-tap="{methods: fillIn, value:explainData}" :value="queryData.explain"></cell>
      </cells>
      <upload v-tap="{methods: uploadFile}"></upload>
      <!--<div class="imgBox" v-show="imgList.length > 0">
        <a v-for="(item, index) in imgList">
          <mu-icon value="close" v-tap="{methods: cancelUploadByIndex, index: index}"></mu-icon>
          <img :src="item.data" alt="" height="100%">
        </a>
      </div>-->
      <div class="imgBox" v-if="imgList.length > 0">
        <fieldset v-for="(item, index) in imgList">
          <mu-icon value="cancel" v-tap="{methods: cancelUploadByIndex, index: index}"></mu-icon>
          <div class="innerImage">
            <img :src="item.data" alt="图片" height="100%" width="70px">
          </div>
        </fieldset>
      </div>
    </div>
    <mu-flat-button label="确定" class="button" :disabled="finish" backgroundColor="#F98700" v-tap="{methods: submit}" color="#FFF"/>
    <input-information :value="inputData" v-on:control="control" v-show="inputShow"/>
  </div>
</template>

<script>
/* eslint-disable */
import isText from "components/text-filed";
import isHeader from "components/my-header";
import isSelect from "components/is-select";
import left from "assets/left-gray.svg";
import model from "components/model";
import upload from "components/upload";
import slideChose from "components/slide-chose.vue";
import cells from "components/cells";
import cell from "components/cell";
import Model from "components/model/model.js";
import inputInformation from "components/input-information";
import getLogisticsList from "services/orders/getLogisticsList";

let cache = {};

export default {
  name: "o_fillInTransport",
  components: {
    isText,
    isHeader,
    isSelect,
    upload,
    model,
    slideChose,
    cells,
    cell,
    inputInformation
  },
  data() {
    return {
      choose: {
        title: "物流公司",
        value: "",
        type: "text"
      },
      trackingNo: {
        title: "物流单号",
        value: "",
        type: "number"
      },
      sendNumber: {
        title: "联系电话",
        value: "",
        type: "number"
      },
      explainData: {
        title: "退款说明",
        value: "",
        type: "text"
      },
      imgList: [],
      left,
      finish: false,
      whatHappen: "",
      isText: "hello",
      queryData: {
        // deliveryId: '',
        trackingNo: "",
        mobile: "",
        orderItem: {},
        methodName: "AddReturns",
        explain: "",
        images: [],
        delivery: ""
      },
      carItem: {},
      isShow: false,
      isUpdate: false,
      inputData: {},
      inputShow: false,
      logisticsList: "",
      logistics: ""
    };
  },
  created() {
    let carItem = JSON.parse(this.$route.query.orderItem);
    this.queryData.orderItemId = carItem.orderId;
    this.queryData.refundsId = this.$route.query.refundsId;
    this.queryData.orderItem = {
      id: carItem.id,
      quantity: carItem.quantity,
      product: {
        id: carItem.product.id
      }
    };
    getLogisticsList.bind(this)(
      {
        methodName: "ListDeliveryCorp"
      },
      res => {
        console.log(res.logisticsList);
        this.logisticsList = res.logisticsList;
      },
      err => {}
    );
  },
  methods: {
    //选择物流
    logisticsChange(value) {
      this.logistics = value;
      this.queryData.delivery = value
    },
    //弹出框
    control() {
      this.inputShow = !this.inputShow;
    },
    choseWhich(params) {
      let index = this.chose.value.indexOf(params.name);
      this.queryData.deliveryId = index;
      this.chose.isShow = false;
    },
    fillIn(params) {
      let _value = params.value;
      this.inputData = _value;
      this.control();
      console.log(this.inputShow);
    },
    cancelUploadByIndex(params) {
      try {
        let index = params.index;
        let whichToSplice = this.imgList.splice(index, 1)[0];
        let type = whichToSplice.type;
        let cancelIndex = cache[type].indexOf(whichToSplice.data);
        cache[type].splice(cancelIndex, 1);
      } catch (e) {
        window.alert(e);
      }
    },
    close(params) {
      this.isShow = false;
    },
    uploadFile() {
      // let req = {}
      console.log();
      if (this.imgList.length == "3") {
        this.$.toast("您最多可以选择3张图片");
        return;
      }
      this.$.push(
        "router_takePhoto",
        {
          maxNum: 3 - this.imgList.length
        },
        resp => {
          resp = JSON.parse(resp);
          resp.forEach(val => {
            if (this.imgList.length < 3) {
              this.imgList.push(val);
              if (!cache[val.type]) {
                cache[val.type] = [];
              }
              cache[val.type].push(val.data);
            }
          });
        }
      );
    },
    submit() {
      let els = document.querySelectorAll("input");
      this.$.handToblur(els);
      if (!this.queryData.delivery || this.queryData.delivery === '物流公司') {
        this.$.toast("请选择物流公司");
        return;
      }
      if (!this.queryData.trackingNo) {
        this.$.toast("请输入物流单号");
        return;
      }
      if (this.queryData.mobile === "") {
        this.$.toast("手机号不能为空");
        return;
      } else if (!/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.queryData.mobile)) {
        this.$.toast("手机号格式不正确");
        return;
      }
      let promises = [];
      for (let name in cache) {
        if (cache[name].length > 0) {
          promises.push(
            this.$.postFileByFormData({
              type: "." + name,
              data: cache[name]
            })
          );
        }
      }
      if (promises.length > 0) {
        Promise.all(promises).then(([result]) => {
          this.queryData.images =
            result && this.queryData.images.concat(result.urls);
          this.$.get(this.queryData).then(resp => {
            if (resp.data.resultCode === "100") {
              this.$.toast("申请成功!");
              this.finish = true;
              this.$router.replace({
                name: "orderDetail",
                params: {
                  orderId: this.queryData.orderItemId
                }
              });
            }
          });
        });
      } else {
        this.$.get(this.queryData).then(resp => {
          if (resp.data.resultCode === "100") {
            this.$.toast("申请成功!");
            this.$router.replace({
              name: "orderDetail",
              params: {
                orderId: this.queryData.orderItemId
              }
            });
          }
        });
      }
    }
  },
  watch: {
    "choose.value": {
      handler: function(value) {
        console.log(value + "1");
        this.queryData.delivery = value;
      }
    },
    "sendNumber.value": {
      handler: function(value) {
        console.log(value + "12");
        this.queryData.mobile = value;
      }
    },
    "trackingNo.value": {
      handler: function(value) {
        console.log(value + "123");
        this.queryData.trackingNo = value;
      }
    },
    "explainData.value": {
      handler: function(value) {
        console.log(value + "1234");
        this.queryData.explain = value;
      }
    }
  }
};
</script>

<style lang="scss">
#fillInTransport {
  .mu-dropDown-menu {
    width: 100%;
  }
  .mu-dropDown-menu-text{
    padding-left: 14px; 
  }
  .mu-dropDown-menu-line{
    margin: 0!important;
  }
}
.mu-popover{
    overflow: auto;
  }
#fillInTransport .text_cantainer {
  padding: 10px 15px;
  background-color: #fff;
}
#fillInTransport .innerImage {
  display: inline-block;
  height: 100px;
  width: 70px;
  overflow: hidden;
  background-size: 100px 70px;
  background-size: cover;
}

#fillInTransport .innerImage img {
  clip-path: margin-box;
}

#fillInTransport .is_label {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

#fillInTransport .select {
  width: 100%;
  height: 34px;
  line-height: 34px;
  border-radius: 6px;
  border-color: #cccccc;
}

#fillInTransport .imgBox {
  height: 100px;
  margin-top: 10px;
}

#fillInTransport .imgBox fieldset {
  border: none;
  position: relative;
  display: inline-block;
  margin-right: 5px;
  width: 70px !important;
  height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
}

#fillInTransport .close {
  position: absolute;
  right: -10px;
  bottom: 90px;
  color: #fbad59;
}

#fillInTransport .imgBox i {
  position: absolute;
  right: -10px;
  bottom: 85px;
  color: black;
  z-index: 2;
}
.material-icons {
  margin-top: 4px !important;
}
#fillInTransport .button {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  border-radius: 8px;
}
</style>
